<template>
  <scroll-view class="tab">
    <view class="tab-item" v-for="(item,index) in list"
      :class="{'tab-item-active' : index === current}"
      :key="index" @click="switchTab(index)">
      {{item.name}}
    </view>
  </scroll-view> 
</template>
<script>
  export default {
    name: "tab",
      data() {
        return {
          list: [{
						id: 0,
						name: '重点实验室',
						code:'Zdsys'
					},
					{
						id: 1,
						name: '科技园区',
						code:'Kjyq'
					},
					{
						id: 2,
						name: '孵化器',
						code:'Fhq'
					},
					{
						id: 3,
						name: '星创天地',
						code:'Xctd'
					},
					{
						id: 4,
						name: '工程技术中心',
						code:'Gcjsyjzx'
					},
					{
						id: 5,
						name: '众创空间',
						code:'Zckj'
					},
					{
						id: 6,
						name: '创新团队',
						code:'Cxtd'
					},],
          current: 0
        };
      },
    methods: {
      switchTab(index) {
      this.current = index
      // 向父页面回传tab索引
      this.$emit('change', index)
    }
  }
}
</script>

<style>
  .tab {
    height: 90rpx;
    line-height: 90rpx;
    display: flex;
  }

  .tab-item {
    width: 50%;
    text-align: center;
    transition: all .3s ease-in-out;
  }
  .tab-item-active {
    background-color: #00AEBE;
    color: #FFFFFF;
  }
</style>